<template>
  <div class="Spu">
    <el-card class="categorySelect">
      <CategorySelect @getData="getData" @watchBtnShow="watchBtnShow" :selectDisabled="selectDisabled"></CategorySelect>
    </el-card>
    <el-card class="info">
      <div class="skuList" v-if="scene === 0">
        <el-button type="primary" icon="el-icon-plus" :disabled="btnDisabled" @click="handleAddSpu">添加Spu</el-button>
        <el-table class="table" border :data="tableData">
          <el-table-column label="序号" align="center" width="80">
            <template v-slot="{$index}">
             {{(pagination.currentPage - 1) * pagination.pageSize + $index + 1}}
            </template>
          </el-table-column>
          <el-table-column label="Spu名称" prop="spuName"></el-table-column>
          <el-table-column label="Spu描述" prop="description"></el-table-column>
          <el-table-column label="操作">
           <template v-slot="{row,$index}">
              <hint-button type="success" icon="el-icon-plus" size="mini" title="添加Sku" @click="handleAddSku(row)"></hint-button>
              <hint-button type="warning" icon="el-icon-edit" size="mini" title="修改Spu" @click="handleEditSpu(row,$index)"></hint-button>
              <hint-button type="info" icon="el-icon-info" size="mini" title="查看当前Spu的全部Sku列表" @click="handleCheckSpu(row)"></hint-button>
              <el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="handleDelete(row)">
                <hint-button type="danger" icon="el-icon-delete" size="mini" title="删除Spu" slot="reference"></hint-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination" style="margin-top: 20px; text-align: center">
          <el-pagination
            :total="pagination.total"
            :page-size="pagination.pageSize"
            :page-sizes="[1, 3, 5, 10]"
            :current-page="pagination.currentPage"
            layout="prev,pager,next,jumper,->,sizes,total"
          @current-change="handleCurChange"
          @size-change="handleSizeChange"
          ></el-pagination>
        </div>
      </div>
      <component :is="'SpuForm'" v-else-if="scene === 1" @changeScene="changeScene" ref="SpuForm" :rowId="rowId" :initSelectionThree="initSelectionThree"></component>
      <component :is="'SkuForm'" v-else-if="scene === 2" ref="SkuForm" @changeScene="changeScene" :spuRow="spuRow" :initObj="initObj"></component>
      <component :is="'Dialog'" v-model="dialogShow" :title="title" ref="Dialog"></component>
    </el-card>
  </div>
</template>

<script>
import { getSpuList, deleteSpu} from "@/api/product/spu";
import pagination from "@/mixins/pagination";
export default {
  name:'Spu',
  mixins:[pagination],
  components:{
    SpuForm:()=>import ('@/views/product/Spu/SpuForm/index.vue'),
    SkuForm:()=>import('@/views/product/Spu/SkuForm/index.vue'),
    Dialog:()=>import('@/views/product/Spu/Dialog/index.vue')
  },
  data(){
    return{
      // selecet组件是否可用
      selectDisabled:false,
      // 表格数据
      tableData:[],
      // 三级分类id
      initSelectionThree:'',
      // 添加SPU按钮是否禁用 
      btnDisabled:true,
      // 场景值 0表格 1spu 2sku
      scene:0,
      rowId:'', // 传给spuForm的id
      spuRow:{}, // 传给skuForm的id
      initObj:{},
      dialogShow:false, // 控制dialog弹框
      title:''
    }
  },
  watch:{
    'scene':{
      handler(newV){
        if (newV === 0) {
          this.selectDisabled = false
        }else{
          this.selectDisabled = true
        }
      }
    }
  },
  methods:{
    // 获取数据
    async getData(obj=''){
      if (obj!=='') {
        this.initObj=obj
        this.initSelectionThree = obj.selectionThree
      }
      const {pagination}=this
      const res = await getSpuList(pagination.currentPage,pagination.pageSize,this.initSelectionThree)
      this.tableData = res.records
      pagination.total = res.total
    },
    watchBtnShow(bol){
      this.btnDisabled = bol
    },
    // 添加spu按钮
    handleAddSpu(){
      this.scene = 1
      this.rowId = ''
    },
    // 修改Spu按钮
    handleEditSpu(row){
      this.scene = 1
      this.rowId = row.id
    },
    // 添加Sku按钮
    handleAddSku(row){
      console.log('row:', row)
      this.spuRow = row
      this.scene = 2
    },
    changeScene(bol=false){
      if (bol) {
        this.getData()
      }
      this.scene = 0
    },
    // 删除按钮
    async handleDelete(row){
      await deleteSpu(row.id)
      this.$message.success('删除成功')
      this.handleCurChange(1)
    },
    // 查看当前Spu的全部Sku列表
    handleCheckSpu(row){
      this.title = row.spuName
      this.dialogShow = true
      this.$refs.Dialog.getData(row.id)
    }
  }
}
</script>

<style lang="scss" scoped>
  .Spu{
    .info{
      margin-top: 20px;
        .skuList{
          .table{
            margin-top: 20px;
          }
        }
    }
  }
</style>